<template>
  <div class="radioCheck">
    <div v-if="isReadOnlyPage === true">
      <p v-if="valueObj === '' || valueObj.radio_value === 'N'">无</p>
      <p v-else v-for='(item, ind) in allData' :key='ind'>{{item.name}} —— <span class="info" v-for="ele in item.children" :key="ele">{{ele}}</span></p>
    </div>
    <div v-else>
      <a-radio-group name="radioGroup" :defaultValue="valueObj.radio_value" @change="onChange">
        <span style="margin-right:10px">职位变化是否自动拒绝候选人:</span>
        <a-radio v-for='(item, ind) in radioParams' :key='ind' :value="item.id">{{item.name}}</a-radio>
        <div v-show='isShow' style='margin-top:10px'>
          <p v-for='(item, index) in allStatus' :key='index' class="change_row">
            <span>{{item.name}} : </span>
            <a-checkbox-group :options="item.params.map((items) => { return items.name })" @change="checkedNode($event, item)" :id="item.id" />
          </p>
        </div>
      </a-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  props: ['isReadOnlyPage', 'radioParams', 'checkParams', 'valueObj'],
  data () {
    return {
      allData: [],
      isShow: true,
      allStatus: [],
      value: {},
      a: {
        check_value: {},
        radio_value: 'Y'
      },
      arr: []
    }
  },
  watch: {
    radioParams: function (ele) {
      console.log(ele)
    },
    checkParams: function (ele) {
      let temp = ele.map(item => {
        return {
          name: item.name,
          children: this.valueObj.check_value[item.tab].map(value => item.params.find(param => param.id === value).name)
        }
      })
      this.allData = temp
    }
  },
  mounted () {
    this.allStatus = this.checkParams
    this.value = this.valueObj
    this.$emit('changeRadioVal', this.value)
    let temp = this.checkParams.map(item => {
      return {
        name: item.name,
        children: this.valueObj.check_value[item.tab].map(value => item.params.find(param => param.id === value).name)
      }
    })
    this.allData = temp
  },
  methods: {
    onChange (e) {
      if (e.target.value === 'N') {
        this.isShow = false
      } else {
        this.isShow = true
      }
    },
    checkedNode (e, checkedValues) {
      let tab = checkedValues.tab
      this.arr = []
      checkedValues.params.forEach((ele, ind) => {
        e.forEach(names => {
          if (names === ele.name) {
            this.arr.push(ele.id)
          }
        })
        this.a.check_value[tab] = this.arr
      })
      this.$emit('changeRadioVal', this.a)
    }
  }
}
</script>

<style lang='stylus' scoped>
.info
  margin-right 10px
.change_row
  margin 10px 0
</style>
